<template>
  <q-page padding>
    <q-table
      :data="links"
      :columns="columns"
      row-key="ID"
      class="q-mt-xl"
      selection="multiple"
      :selected.sync="selected"
    >
      <template v-slot:top>
        <div class="row q-gutter-lg items-center">
          <q-select v-model="selectedGroup" label="选择分组" :options="groups" option-label="Name" option-value="ID"
                    style="min-width: 120px"/>
          <q-btn label="创建链接" :disable="!selectedGroup" color="primary" @click="create"/>
          <q-btn label="删除链接" :disable="!selectedGroup || !selected || selected.length===0" @click="del"/>
          <div v-if="selectedGroup">
            <div class="text-caption">分组地址：{{ `${baseURL}/s?ID=${selectedGroup.ID}` }}
              <q-btn icon="content_copy" flat dense size="sm"
                     @click="copyToClipboard(`${baseURL}/s?ID=${selectedGroup.ID}`)"></q-btn>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:body-cell-Start="props">
        <q-td class="text-center">
          <div class="text-caption">
            <span class="cursor-pointer">{{ props.row.Start }}</span>
          </div>
          <q-popup-edit v-model="props.row.Start" title="设置起始时间">
            <template v-slot="{ set, cancel}">
              <q-input
                autofocus
                dense
                mask="time"
                :rules="['time']"
                v-model="props.row.Start"
              >
                <template v-slot:after>
                  <q-btn flat dense color="negative" icon="cancel" @click.stop="cancel"/>
                  <q-btn flat dense color="positive" icon="check_circle" @click.stop="save(props.row, set)"/>
                </template>
              </q-input>
            </template>
          </q-popup-edit>
        </q-td>
      </template>
      <template v-slot:body-cell-Stop="props">
        <q-td class="text-center">
          <div class="text-caption">
            <span class="cursor-pointer">{{ props.row.Stop }}</span>
          </div>
          <q-popup-edit v-model="props.row.Stop" title="设置停用时间">
            <template v-slot="{ set, cancel}">
              <q-input
                autofocus
                dense
                mask="time"
                :rules="['time']"
                v-model="props.row.Stop"
              >
                <template v-slot:after>
                  <q-btn flat dense color="negative" icon="cancel" @click.stop="cancel"/>
                  <q-btn flat dense color="positive" icon="check_circle" @click.stop="save(props.row, set)"/>
                </template>
              </q-input>
            </template>
          </q-popup-edit>
        </q-td>
      </template>
      <template v-slot:body-cell-Url="props">
        <q-td class="text-center">
          <div class="text-caption">
            <span class="cursor-pointer">{{ props.row.Url ? props.row.Url : '点击设置地址' }}</span>
            <q-btn v-if="props.row.Url" icon="content_copy" flat dense size="sm"
                   @click.stop="copyToClipboard(props.row.Url)"></q-btn>
          </div>
          <q-popup-edit v-model="props.row.Url" title="设置地址">
            <template v-slot="{ set, cancel}">
              <q-input
                autofocus
                dense
                v-model="props.row.Url"
              >
                <template v-slot:after>
                  <q-btn flat dense color="negative" icon="cancel" @click.stop="cancel"/>
                  <q-btn flat dense color="positive" icon="check_circle" @click.stop="save(props.row, set)"/>
                </template>
              </q-input>
            </template>
          </q-popup-edit>
        </q-td>
      </template>
    </q-table>
  </q-page>
</template>

<script>
import {copyToClipboard} from 'quasar'

export default {
  name: "Links",
  data() {
    return {
      groups: [],
      group: {
        ID: 0,
        Name: ''
      },
      selectedGroup: null,
      links: [],
      selected: [],
      columns: [
        {
          name: "Start",
          label: "起始时间",
          field: "Start",
          align: 'center'
        },
        {
          name: "Stop",
          label: "停用时间",
          field: "Stop",
          align: 'center'
        },
        {
          name: "Url",
          label: "地址",
          field: "Url",
          align: 'center'
        }
      ],
      baseURL: this.$axios.defaults.baseURL
    }
  },
  watch: {
    selectedGroup(val) {
      this.getLinks(val)
    }
  },
  created() {
    this.$axios.get('/groups').then(data => {
      if (data) {
        this.groups = data
      }
    })
  },
  methods: {
    copyToClipboard(text) {
      copyToClipboard(text)
        .then(() => {
          this.$q.notify('已复制')
        })
        .catch(() => {
          this.$q.notify('复制失败！')
        })
    },
    getLinks(group) {
      this.$axios.get('/links', {params: {GroupID: group.ID}}).then(data => {
        if (data) {
          this.links = data
          this.selected = []
        }
      })
    },
    create() {
      const link = {
        ID: 0,
        GroupID: this.selectedGroup.ID,
        Start: '00:00',
        Stop: '00:00',
        Url: ''
      }
      this.$axios.put('/link', link).then(data => {
        if (data) {
          this.links.unshift(data)
        }
      })
    },
    del() {
      this.$q.dialog({
        title: `确认删除所选地址？`,
        cancel: true
      }).onOk(() => {
        const params = {
          GroupID: this.selectedGroup.ID,
          IDs: []
        }
        for (const link of this.selected) {
          params.IDs.push(link.ID)
        }
        this.$axios.delete('/link', {params: params}).then(data => {
          if (data && data.type === 'success') {
            for (const link of this.selected) {
              for (let i = 0; i < this.links.length; i++) {
                if (this.links[i].ID === link.ID) {
                  this.links.splice(i, 1)
                }
              }
            }
            this.selected = []
          }
        })
      })
    },
    save(link, done) {
      this.$axios.put('/link', link).then(data => {
        if (data) {
          done()
          this.$q.notify({type: 'positive', message: '已保存'})
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
